<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul li {
			list-style: none;
		}

		#main {
			width: 100%;
			height: 260px;
			margin: 40px 5%;
		}

		.top {
			width: 100%;
		}

		#main ul li {
			width: 200px;
			height: 260px;
			float: left;
			position: relative;
		}

		#main ul li div {
			width: 100%;
			height: 260px;
		}

		#main ul li div.des {
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .3);

		}

		#main ul li div.des h4 {
			color: #FFF;
			font-size: 30px;
			padding: 30px;
			width: 30px;
			margin: 0 auto;

		}
	</style>

</head>

<body>

	<div id="top">
		<img src="img/top.png" />
	</div>
	<div id="main">
		<div>
			<ul>
				<li>
					<div class="des">
						<h4>园林酒店</h4>
					</div>
					<div style="background: url(img/1.jpg) center;"></div>
				</li>

				<li>
					<div class="des">
						<h4>设计师酒店</h4>
					</div>
					<div style="background: url(img/2.jpg) center;"></div>
				</li>

				<li>
					<div class="des">
						<h4>青年旅社</h4>
					</div>
					<div style="background: url(img/3.jpg) center;"></div>
				</li>

				<li>
					<div class="des">
						<h4>特色客栈</h4>
					</div>
					<div style="background: url(img/4.jpg) center;"></div>
				</li>

				<li>
					<div class="des">
						<h4>海岛酒店</h4>
					</div>
					<div style="background: url(img/5.jpg) center;"></div>
				</li>

				<li>
					<div class="des">
						<h4>海外温泉</h4>
					</div>
					<div style="background: url(img/6.jpg) center;"></div>
				</li>
			</ul>
	</div>
	<script src="./jquery/jquery.js"></script>
	<script>
		// 1、鼠标移入，当前遮罩层隐藏，图片宽度为400px，其他图片宽度为160px,
		// 2、鼠标移出，当前遮罩层显示，所有图片宽度为200px
		$("#main li").on('mouseover',function(){
			// console.log(1);
			$(this).find(".des")  //找到遮影层
			.hide()  //影藏
			.end()  //向上查找，找到this
			.stop(true)
			.animate({
				width : 400
			})
			.siblings('li')
			.stop(true)
			.animate({
				width : 160
			})
		})
		$('#main li').on('mouseout',function(){
			// console.log(1);
			$(this).find('.des')
			.show()
			$(this)
			.stop(true)
			.animate({
				width : 200
			})
		})
	</script>
</body>
</html>